<template>
	<view class="page">
		<view class="search-box">
			<icon class="search-icon" type="search" color="#767676" size="16"></icon>
			<input class="input" type="text" value="" />
		</view>
		<view class="roles-item">
			<card value="系统管理员"></card>
		</view>
	</view>
</template>

<script>
	import card from '../component/card/card.vue';
	export default {
		components:{
			card
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #f6f6f6;
		min-height: 100vh;
	}
	.search-box{
		width: calc(100% - 40rpx);
		height: 80rpx;
		margin: 0 auto;
		margin-top:20rpx;
		box-sizing: border-box;
		padding:0 20rpx;
		background-color: white;
		box-shadow:1rpx 2rpx 10rpx #A1A1A1;
		border-radius: 10rpx;
		display: flex;
		.search-icon{
			margin-top:25rpx;
			color:black;
		}
		.input{
			flex: 1;
			height: 80rpx;
			margin-left: 10rpx;
		}
	}
	.roles-item{
		width: calc(100% - 40rpx);
		margin: 0 auto;
		background-color: white;
		margin-top: 20rpx;
	}
</style>
